<script lang="ts">
import type { BigNumber } from '@peng_kai/kit/libs/bignumber';

export interface TReward {
  symbol: string;
  amount: BigNumber.Value;
  balance?: BigNumber.Value;
  currency?: string;
}

export const claimSuccessPopup = useAntdModal({
  // eslint-disable-next-line import/no-self-import
  is: defineAsyncComponent(() => import('./ClaimSuccess.vue')),
  type: 'modal',
}, {
  wrapClassName: '!overflow-hidden',
  width: 'fit-content',
  centered: true,
  mousePosition: {
    get x() { return window.innerWidth / 2; },
    get y() { return window.innerHeight / 2; },
  },
});
</script>

<script setup lang="ts">
const props = withDefaults(defineProps<{
  reward?: TReward[];
}>(), {
});
</script>

<template>
  <div class="animate__bounce-in bg-sunshine pointer-events-auto relative w-70" u:lt-mobile="w-55">
    <div class="rounded-2 bg-sys-layer-d p-5">
      <div class="mb-4 text-center text-2xl text-green-5 font-bold font-mono">
        Bonus!
      </div>
      <div class="grid max-h-36 gap-2 overflow-y-scroll rounded-2 bg-sys-layer-a p-5">
        <div v-for="item in props.reward" :key="item.symbol" class="flex-center gap-1 text-sm">
          <TAmount
            :value="item.amount ?? bignumber(Number(item?.balance))"
            :symbol="item.symbol ?? item?.currency"
            iconPos="left"
            :maxDecimalPlaces="6" class="text-sm"
            iconSize="1.1em"
          />
          <span class="text-gray">{{ item.symbol }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bg-sunshine::before {
  --uno: 'absolute size-62 -mt-31 -ml-31 left-50% top-50% rounded-full bg-no-repeat bg-cover -z-1 pointer-events-none';

  content: '';
  background-image: url('~/assets/icons/bonuses/sunshine.svg');
  animation: rotate-bg 4s linear infinite;
}

@keyframes rotate-bg {
  0% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(90deg) scale(1.35);
  }

  50% {
    transform: rotate(180deg) scale(1);
  }

  75% {
    transform: rotate(270deg) scale(1.35);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

.animate__bounce-in {
  animation-name: bounce-in;
  animation-duration: 0.75s;
}

@keyframes bounce-in {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
</style>
